<template>


 <el-card style="width: 33%;height: 300px;float: left">
    <table style="height: auto;width: auto;">
      <thead>
        <tr>
          <td>
            <span style="color: blue;font-size: 30px;font-weight: bold;">
              {{ ImageChange.Imaquantity }}
            </span>
            <span style="color: blue;padding:300px;font-size: 30px;font-weight: bold;">
              {{ ImageChange.Imastorage_Money }}
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <span style="color: black;font-size: 30px;font-weight: bold;">
              当前库存数量
            </span>
            <span style="color: black;padding:100px;font-size: 30px;font-weight: bold;">
              当前库存金额
            </span>
          </td>
        </tr>
      </thead>
    </table>


  </el-card>

  <el-card style="width: 33%;height: 300px;float: left;">

    <table style="height: auto;width: auto;">
      <thead>
        <tr>
          <td>
            <span style="color: green;font-size: 30px;font-weight: bold;">
              {{ ImageChange.Imawating_Into }}
            </span>
            <span style="color: yellow;padding:200px;font-size: 30px;font-weight: bold;">
              {{ ImageChange.Imawating_Out }}
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <span style="color: black;font-size: 30px;font-weight: bold;">
              待入库
            </span>
            <span style="color: black;padding:100px;font-size: 30px;font-weight: bold;">
              待出库
            </span>
          </td>
        </tr>
      </thead>
    </table>
  </el-card>



  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="AddOppen()">新增</el-button>
      <el-button type="primary" @click="OppenExports()">导出</el-button>
    </el-form-item>
  </el-form>


  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column prop="ledgerInfoManagement_Id" label="序号" width="auto">
      <template v-slot="scope">
        <el-checkbox-group v-model="addIds">
          <el-checkbox :value="scope.row.ledgerInfoManagement_Id">{{ scope.row.ledgerInfoManagement_Id }}</el-checkbox>
        </el-checkbox-group>
      </template>
    </el-table-column>
    <el-table-column prop="product_Code" label="货物编号" width="auto">
      <template v-slot="scope">
        <span >{{ scope.row.product_Code }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="product_Name" label="仓库名称" width="auto" />
    <el-table-column prop="please_Name" label="库位名称" width="auto" />
    <el-table-column prop="quantity" label="当前库存" width="auto" />
    <el-table-column prop="storage_Unit" label="可用库存" width="auto" />
    <el-table-column prop="wating_Into" label="待入库" width="auto" />
    <el-table-column prop="wating_Out" label="待出库" width="auto" />
    <el-table-column label="操作" width="auto">
      <template v-slot="scoped">
        <el-button type="text" @click="StorageDetail(scoped.row.ledgerInfoManagement_Id)">库存分布</el-button>
      </template>
    </el-table-column>
  </el-table>
  <table>
    <thead>
      <tr>
        <td>
          <el-pagination v-model:current-page="Page.pageIndex" v-model:page-size="Page.pageSize"
            :page-sizes="[15, 20, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper,slot"
            :total="Page.total" prev-text="上一页" next-text="下一页">
            共{{ Page.total }}条，共{{ Page.pageIndex }}\{{ Page.totalPage }}页
          </el-pagination>
        </td>
      </tr>
    </thead>

  </table>
  <div class="table-footer">
    <div class="batch-actions">
      <el-button size="small" @click="selectAll()">全选</el-button>
      <el-button size="small" @click="reverseSelect()">反选</el-button>
      <el-select size="small" placeholder="批量操作" style="width: 120px;">
        <el-option label="批量删除" value="delete" @click="DeleteAll()" />
        <el-option label="批量导出" value="export" @click="OppenExportsAll()" />
      </el-select>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
// import { http } from '@/axios/axiosHelpers'
import { systeamread } from '@/systeamaxios/sysaxiosHelpers'
import { useRouter } from 'vue-router'

const router = useRouter()
const AdddialogVisible = ref(false)
const UpdatedialogVisible = ref(false)
const Oppen2 = ref(false)
const LogExport = ref(false)
const addIds = ref<any>([])
const ExportCouts = reactive({
  cout: ""
})
const ImageChange = reactive({
  Imaquantity: 0,
  Imastorage_Money: 0,
  Imawating_Into: 0,
  Imawating_Out: 0
})
//表格加入
const Page = reactive({
  pageIndex: 1,
  pageSize: 15,
  total: 0,
  totalPage: 0
})
const bt = reactive({
  bid: 0
})
const formInline = reactive({
  product_Code: "",
  product_Type: "",
  weight: "",
  warehouse_Name: "",
  numberData: "",
  product_Status: "",
})
const StorageDetail=(id:number)=>{
systeamread.get("/api/LedgerManagementAll/FirstLedgerManagement",{
  params:{
    id:id
  }
}).then(res=>{
  ImageChange.Imaquantity = res.data.data.quantity
  ImageChange.Imastorage_Money = res.data.data.money
  ImageChange.Imawating_Into = res.data.data.wating_Into
  ImageChange.Imawating_Out = res.data.data.wating_Out

})
}
const Gochange = (id: number) => {
  router.push({
    name: "InventoryAuditEdit",
    query: {
      id: id
    }
  })
}
const AddForm = reactive({
  "ledgerInfoManagement_Id": 16,
  "product_Code": "1",
  "product_Name": "1",
  "product_Status": "1",
  "product_Type": "1",
  "product_RuleNumber": "1",
  "weight": "1",
  "numberData": "1",
  "warehouse_Name": "1",
  "please_Name": "1",
  "quantity": 1,
  "money": 1,
  "wating_Into": 1,
  "wating_Out": 1,
  "storage_Unit": 1,
  "storage_Money": 1,
  "start_Unit": 1,
  "end_Unit": 1,
  "isDel": false
})

const tableData = ref([{
  "ledgerInfoManagement_Id": 16,
  "product_Code": "1",
  "product_Name": "1",
  "product_Status": "1",
  "product_Type": "1",
  "product_RuleNumber": "1",
  "weight": "1",
  "numberData": "1",
  "warehouse_Name": "1",
  "please_Name": "1",
  "quantity": 1,
  "money": 1,
  "wating_Into": 1,
  "wating_Out": 1,
  "storage_Unit": 1,
  "storage_Money": 1,
  "start_Unit": 1,
  "end_Unit": 1,
  "isDel": false
}])

const AddOppen = () => {
  AdddialogVisible.value = true
}

//保存选中的id
const handleSelectionChange = (selection: any[]) => {
  addIds.value = selection.map(item => item.rabit_Id)
}
//全部选中id
const selectAll = () => {
  addIds.value = tableData.value.map(item => item.ledgerInfoManagement_Id)
}
//反选
const reverseSelect = () => {
  addIds.value = tableData.value.filter(item => !addIds.value.includes(item.ledgerInfoManagement_Id)).map(item => item.ledgerInfoManagement_Id)
}

const OppenExportsAll = () => {
  // let url = "http://112.126.93.146:8000/managementsysteamreadapis/api/ExportAll/?Ids=" + addIds.value.toString();
  let url = "http://localhost:5293/api/ExportAll/?Ids=" + addIds.value.toString();
  window.location.href = url
  addIds.value = []
}

const OppenExports = () => {
  LogExport.value = true
}
onMounted(() => {
  Show()
})
watch(Page, () => {
  Show()
})
const AllExport = () => {
  // let url = "http://112.126.93.146:8000/managementsysteamreadapis/api/ExportAll/ProductOutAllows?NumCout=" + ExportCouts.cout;
  let url = "http://localhost:5293/api/ExportAll/ProductOutAllows?NumCout=" + ExportCouts.cout;
  window.location.href = url
  LogExport.value = false
}
const Show = () => {

  // http.get("/managementsysteamreadapis/api/ProductOutAllowAll/ShowProductOutAllow", {
  systeamread.get("/api/LedgerManagementAll/ShowLedgerManagement", {
    params: {
      PageIndex: Page.pageIndex,
      PageSize: Page.pageSize,
      product_Code: formInline.product_Code,
      product_Type: formInline.product_Type,
      weight: formInline.weight,
      warehouse_Name: formInline.warehouse_Name,
      numberData: formInline.numberData,
      product_Status: formInline.product_Status

    }
  })
    .then(res => {
      tableData.value = res.data.data.data
      Page.total = res.data.total
      Page.totalPage = res.data.totalPage
      addIds.value = []
    })
}

const DeleteAll = () => {
  // http.get("/managementsysteamreadapis/api", {
  systeamread.get("/api/LedgerManagementAll/DelAllLedgerManagement", {
    params: {
      ids: addIds.value.toString()
    }
  }).then(res => {
    ElMessage.success(res.data.message)
  })
}
const Delete = (id: number) => {
  if (!confirm("确定删除吗"))
    return;
  // http.delete("/managementsysteamreadapis/api/ProductOutAllowAll/DelProductOutAllow", {
  systeamread.delete("/api/InventoryAuditsAll/DelInventoryAudit", {
    params: {
      InventoryAudit_Id: id
    }
  })
    .then(res => {
      ElMessage.success(res.data.message)
      Show()
    })
}



</script>